<template>
  <div class="page">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      :inline="true"
      class="demo-ruleForm"
    >
      <!--订单发货基本信息-->
      <div class="deliveryDetails">
        <!--上方栏-->
        <div class="top" style="border-bottom:1px dashed #ccc;padding:20px 40px;overflow:hidden">
          <!--1/4栏-->
          <div style="width:30%;text-align:left;float:left">
            <div style="margin:10px 0px 40px 10px">
              <span>订单编号：</span>
              <span>{{ orderDetail.orderNo }}</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>来源终端：</span>
              <span v-if="orderDetail.sources == 0">全部</span>
              <span v-if="orderDetail.sources == 1">APP</span>
              <span v-if="orderDetail.sources == 2">商城小程序</span>
              <span v-if="orderDetail.sources == 3">企业微信</span>
              <span v-if="orderDetail.sources == 4">We2000公众号</span>
              <span v-if="orderDetail.sources == 5">商城公众号</span>
              <span v-if="orderDetail.sources == 6">其他</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>下单时间：</span>
              <span>{{ orderDetail.buyTime }}</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>支付状态：</span>
              <span v-if="orderDetail.balanceSts == 0">全部</span>
              <span v-if="orderDetail.balanceSts == 1">未结算</span>
              <span v-if="orderDetail.balanceSts == 2">已清算</span>
              <span v-if="orderDetail.balanceSts == 3">轧差中</span>
              <span v-if="orderDetail.balanceSts == 4">已轧差</span>
            </div>
            <div style="margin:0px 0px 0px 10px">
              <span>手机：</span>
              <span>{{ orderDetail.consigneePhone }}</span>
            </div>
          </div>
          <!--2/4栏-->
          <div style="width:20%;text-align:left;float:left">
            <div style="margin:10px 0px 40px 10px">
              <span>订单类型：</span>

              <span v-if="orderDetail.orderTypeb == 0">全部</span>
              <span v-if="orderDetail.orderTypeb == 1">积分订单</span>
              <span v-if="orderDetail.orderTypeb == 2">普通订单</span>
            </div>
            <div style="margin:0px 0px 40px  10px">
              <span>来源渠道：</span>
              <span v-if="orderDetail.sources == 0">全部</span>
              <span v-if="orderDetail.sources == 1">APP</span>
              <span v-if="orderDetail.sources == 2">商城小程序</span>
              <span v-if="orderDetail.sources == 3">企业微信</span>
              <span v-if="orderDetail.sources == 4">We2000公众号</span>
              <span v-if="orderDetail.sources == 5">商城公众号</span>
              <span v-if="orderDetail.sources == 6">其他</span>
            </div>
            <div style="margin:0px 0px 40px  10px">
              <span>会员手机号：</span>
              <span>没有字段</span>
            </div>
            <div style="margin:0px 0px 40px  10px">
              <span>支付方式：</span>
              <span v-if="orderDetail.payment == 0">全部</span>
              <span v-if="orderDetail.payment == 1">微信分期</span>
              <span v-if="orderDetail.payment == 2">We2000</span>
              <span v-if="orderDetail.payment == 3">微信支付</span>
              <span v-if="orderDetail.payment == 4">微信银行储蓄卡</span>
            </div>
            <div style="margin:0px 0px 10px  10px">
              <span>收货人姓名：</span>
              <span>{{ orderDetail.receiverName }}</span>
            </div>
          </div>
          <!--3/4栏-->
          <div style="width:30%;text-align:left;float:left">
            <div style="margin:10px 0px 40px 10px">
              <span>订单状态：</span>
              <span>{{ orderDetail.orderStatus }}</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>订单来源：</span>
              <span v-if="orderDetail.orderSources == 0">全部</span>
              <span v-if="orderDetail.orderSources == 1">拼团</span>
              <span v-if="orderDetail.orderSources == 2">秒杀</span>
              <span v-if="orderDetail.orderSources == 3">预售</span>
              <span v-if="orderDetail.orderSources == 4">抽奖</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>外部订单编号：</span>
              <span>{{ orderDetail.externalOrderCode }}</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>订单标签：</span>
              <span v-if="orderDetail.orderTag == 0">VIP</span>
              <span v-if="orderDetail.orderTag == 1">紧急</span>
              <span v-if="orderDetail.orderTag == 2">特别</span>
              <span v-if="orderDetail.orderTag == 3">关注</span>
              <span v-if="orderDetail.orderTag == 4">搁置</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>收货人地址：</span>
              <span>{{ orderDetail.receiverAddress }}</span>
            </div>

          </div>
          <!--4/4栏-->
          <div style="width:20%;text-align:left;float:left">
            <div style="margin:10px 0px 40px 10px">
              <span>销售商户：</span>
              <span>{{ orderDetail.salesBusiness }}</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>商品类型：</span>
              <span>没有字段</span>
            </div>
            <div style="margin:0px 0px 40px 10px">
              <span>订单异常状态：</span>
              <span>没有字段</span>
            </div>

          </div>
        </div>
        <!--下方栏-->
      </div>
      <!--表格-->
      <div class="table">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="商品明细" name="first">
            <el-table :data="productDetailsData" style="width: 100%" border stripe>
              <el-table-column  type="index" label="订单行号" width="180">
              </el-table-column>
              <el-table-column prop="goodsName" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码">
              </el-table-column>
              <el-table-column prop="propertyName" label="规格属性">
              </el-table-column>
              <el-table-column prop="barCode" label="条码"></el-table-column>
              <el-table-column prop="artNo" label="货号"></el-table-column>
              <el-table-column prop="goodsNum" label="购买数量">
              </el-table-column>
              <el-table-column prop="unitName" label="计量单位"></el-table-column>
              <el-table-column prop="alreadyTransferDeliverNum" label="已发货数量">
              </el-table-column>
              <el-table-column prop="waitTransferDeliverNum" label="未发货数量">
              </el-table-column>
            </el-table>
            <template>
              <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                <span>提货状态</span>
              </div>
              <div style="text-align:left">
                <br><p>已提货</p><br>
                <span>提货时间：2020-11-16 12:16</span><br><br>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="物流信息" name="second">
            <template>
              <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                <span>包裹</span>
              </div>
              <!--商品信息-->
              <div style="text-align:left">
                <el-table :data="productDetailsData" style="width: 100%" border stripe>
                  <el-table-column  type="index" label="订单行号" width="180">
                  </el-table-column>
                  <el-table-column prop="goodsName" label="商品名称" width="180">
                  </el-table-column>
                  <el-table-column prop="productCode" label="商品编码">
                  </el-table-column>
                  <el-table-column prop="propertyName" label="规格属性">
                  </el-table-column>
                  <el-table-column prop="orderingUnit" label="订购单位">
                  </el-table-column>

                  <el-table-column prop="artNo" label="货号"></el-table-column>

                  <el-table-column prop="quantityOfThisShipment" label="发货数量">
                  </el-table-column>

                </el-table>
              </div>
              <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
                <span>进度详情</span>
              </div>
              <div style="text-align:left;height:400px;padding-top:30px" >
                <el-row :gutter="20">
                  <el-col :span="6" style="padding-left: 100px;text-align: left;">
                    <p>包裹编号：{{packagerDetail.baleNo}}</p><br>
                    <p>配送商：{{packagerDetail.distributorName}}</p><br>
                    <p>运单号：{{packagerDetail.distributorName}}</p><br>
                    <p>包裹状态：{{packagerDetail.orderStatus}}</p><br>
                    <p>收货人：{{packagerDetail.receiverName}}</p><br>
                    <p>收货人电话：{{packagerDetail.receiverPhone}}</p><br>
                    <p>收货人地址：{{packagerDetail.receiverAddress}}</p><br>
                  </el-col>
                  <el-col :span="14">
                    <p>顺丰速运 已收取快件</p><br>
                    <p>2016-04-27 21:00:00   快件离开【上海徐汇田林营业部】,正发往 【上海虹桥集散中心2】</p><br>
                    <p>2016-04-27 21:52:00   快件离开【上海虹桥集散中心2】,正发往下一站</p><br>
                    <p>2016-04-28 01:40:00   快件离开【苏州昆山集散中心】,正发往下一站</p><br>
                    <p>2016-04-28 04:56:00   快件离开【苏州吴中集散中心】,正发往 【苏州工业园苏利达服饰营业点】</p><br>
                    <p>2016-04-28 09:32:00   快件到达顺丰合作点【苏州大学独墅湖校区一期炳麟图书馆咖啡吧】,请携带有效证件前往自取</p><br>
                    <p>2016-04-28 15:00:00   正在派送途中,请您准备签收(派件人:范猛,电话:18962141940)</p><br>
                    <p>2016-04-28 19:05:00   已签收,感谢使用顺丰,期待再次为您服务</p><br>
                  </el-col>
                </el-row>
              </div>
            </template>

          </el-tab-pane>
        </el-tabs>
      </div>
      <!--货品详情-->
      <el-row>
        <el-col :span="10" :offset="10">
          <!--  <el-button type="primary" @click="sendGood" round size="mini"
           >发运确认
           </el-button
           > -->
          <el-button @click="goBack" round size="mini">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--弹出框-->
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="30%"
    >
      <span style="font-weight:700;font-size:18px">是否确认发货?</span>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button size="mini" type="primary" @click="deliverGoods()" >确定</el-button>
        <el-button size="mini"  @click="dialogVisible = false"
        >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import VDistpicker from 'v-distpicker'
  export default {
    components: {
      VDistpicker,
    },
    data() {
      return {
        activeName:"first",
        grossWeight:"1kg",
        distributionMode:"快递物流",//
        totalQuantity:2,//合计数量
        baleDetailInfoList:[],//包裹信息集合
        deliveryTypeOptions:[],//配送方式集合
        dialogVisible:false,
        size: 'small',
        deliverNo:this.$route.params.deliverNo,//交货单号
        orderNo:"",//订单号
        /*         activeName: 'productInfo', */
        orderDetail: {},
        packagerDetail: {},
        BaleDetailInfo: {},
        orderBaleDelivery: [], // 物流详情
        orderGoodsData: {
          'orderNo': '',
          'limit': 10,
          'start': 1
        },
        productDetailsData: [{
          goodsName:"",
          productCode:"",
          propertyName:"",
          orderingUnit:"",
          artNo:"",
          quantityOfThisShipment:"",
        }],
        ruleForm: {
          receiverName:"",
          orderStatus:"",
          receiverPhone:"",
          receiverProvinceName:"",
          receiverCityName:"",
          receiverRegionName:"",
          receiverAddress:"",
          distributorId:"",
          expressNo:""
        },
      }
    },
    mounted() {
      this.queryOrderNoByDeliverNo();
      this.queryOrderLogisticsCompanyList();
    },
    methods: {
      //通过交货单号查询订单号
      queryOrderNoByDeliverNo:function(){
        let this_=this
        this.utils.request.queryOrderNoByDeliverNo({deliverNo:this.deliverNo}, function (res) {
          if(res.code="0000"){
            this_.ruleForm={
              receiverName:res.data.receiverName,
              orderStatus:this_.formateOrderStatus(res.data.orderStatus),
              receiverPhone:res.data.receiverPhone,
              receiverProvinceName:res.data.receiverProvinceName,
              receiverCityName:res.data.receiverCityName,
              receiverRegionName:res.data.receiverRegionName,
              receiverAddress:res.data.receiverAddress,
              distributorId:"",
              expressNo:""
            }
            this_.orderNo=res.data.orderNo
            this_.getOrderDetail(res.data.orderNo)
            this_.queryOrderGoodsQuery(res.data.orderNo)
            this_.getParcel(res.data.orderNo)
          }
        })
      },
      handleClick(){

      },

      //发货确认
      deliverGoods:function(){
        let this_=this
        let params = Object.assign({}, this.ruleForm);
        params.orderNo=this_.orderNo
        params.deliverNo=this_.deliverNo
        let baleInfoList=[]
        let baleInfo={}
        baleInfo.distributor=this.ruleForm.distributorId
        baleInfo.expressNo=this.ruleForm.expressNo
        baleInfo.baleDetailInfoList=this.baleDetailInfoList
        baleInfoList.push(baleInfo)
        this_.baleDetailInfoList.forEach(item=>{
          baleInfo.distributor=this.ruleForm.distributor
          item.expressNo=this.ruleForm.expressNo
          baleInfoList.push(item)
        })
        params.baleInfoList=baleInfoList
        this.utils.request.confirmShip(params, function (res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.$router.push("/Order/orderDeliveryManagement.vue")
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
          this_.dialogVisible = false;
        });
      },
      //配送方式初始化
      queryOrderLogisticsCompanyList:function(){
        let this_=this
        this_.utils.request.queryOrderLogisticsCompanyList({}, function (res) {
          if(res.code=="0000"){
            this_.deliveryTypeOptions=res.data
          }
        })
      },
      //确认发货弹框
      sendGood:function(){
        if(this.ruleForm.deliveryType||this.ruleForm.deliveryType==""){
          return this.$message({message: '请选择配送商', type: 'error'})
        }
        if(this.ruleForm.logisticsOrderNumber||this.ruleForm.logisticsOrderNumber==""){
          return this.$message({message: '请输入物流单号', type: 'error'})
        }
        this.dialogVisible=true
      },
      //返回
      goBack:function(){
        this.$router.push("/Order/orderDeliveryManagement.vue")
      },
      //订单状态格式化
      formateOrderStatus:function(param){
        if(param==1){
          return "待支付"
        }else if(param==2){
          return "已支付"
        }else if(param==3){
          return "待发货"
        }else if(param==4){
          return "已发货"
        }else if(param==5){
          return "确认收货"
        }else if(param==6){
          return "待评价"
        }else if(param==7){
          return "已关闭"
        }else if(param==8){
          return "付款处理中"
        }else if(param==9){
          return "已退款"
        }else {
          return "已完成"
        }
      },
      // 订单详情
      getOrderDetail:function(data) {
        let this_ = this
        this_.orderNo=data
        this_.utils.request.getOrderDetail({orderNo: this_.orderNo}, function (res) {
          if (res.code == '0000') {
            if (res.data != null) {
              this_.orderDetail = res.data
              this_.orderDetail.orderStatus=this_.formateOrderStatus(res.data.orderStatus)
            }
          }
        })
      },
      //包裹查询
      getParcel:function(data) {
        let this_ = this;
        this_.utils.request.orderBaleDeliveryInfo({orderNo: data}, function (res) {
          if (res.code == '0000') {

              this_.packagerDetail = res.data[0]
              this_.packagerDetail.orderStatus=this_.formateOrderStatus(res.data.orderStatus)

          }
        })
      },
      // 订单商品明细分页
      queryOrderGoodsQuery(data) {
        let this_ = this
        this_.orderGoodsData.orderNo = data
        this_.utils.request.queryOrderGoodsQuery(this_.orderGoodsData, function (res) {
          if (res.code == '0000') {
            this_.productDetailsData = res.data.rows
            let BaleDetailInfo={}
            res.data.rows.forEach(item=>{
              this_.BaleDetailInfo.goodsId=item.goodsId
              this_.BaleDetailInfo.goodsName=item.goodsName
              this_.BaleDetailInfo.goodsNum=item.goodsNum
              this_.BaleDetailInfo.goodsType = item.goodsType
              this_.baleDetailInfoList.push(BaleDetailInfo)
            })
            this_.totalQuantity=res.data.rows.length
          }
        })
      },
      //现期望工作地省市区三联动
      onChangeProvince3(data) {
        this.ruleForm.receiverProvinceName = data.code;
        this.ruleForm.receiverProvinceName = data.value;
      },
      onChangeCity3(data) {
        this.ruleForm.receiverCityName = data.code;
        this.ruleForm.receiverCityName = data.value;
      },
      onChangeArea3(data) {
        this.ruleForm.receiverRegionName = data.code;
        this.ruleForm.receiverRegionName = data.value;
      },
    }
  }
  ;
</script>
<style lang="scss" scoped>
  .page {
    .deliveryDetails {
      background-color: #fff;
      overflow: hidden;
      border: 1px solid #ccc;
      margin-bottom: 20px;
      .bottom {
        overflow: hidden;
        padding-top: 20px;
      }
    }
    .table {
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .goodsDetails {
      border: 1px solid #ccc;
      padding: 20px 0px;
      margin-bottom: 20px;
    }
  }
  .inblock{
    display: inline-block;
  }
  .pl10{
    padding-left: 10px !important;
  }
</style>
